<template>
    <div
      class="diy-tabs"
      :style="{
        height: '45px',
        lineHeight: '40px',
        background: '#fff',
        borderBottom: '1px solid #eee',
        whiteSpace: 'nowrap',   // 不换行
        overflowX: 'auto'}"
    >
      <div
        v-for="(tab, idx) in tabsList"
        :key="idx"
        class="diy-tab-item"
        :class="{ active: tab.dictValue === tabsCurrent }"
        :style="{
          display: 'inline-block',
          width: '65px',
          textAlign: 'center',
          fontSize: '14px',
          cursor: 'pointer',
          position: 'relative',
          color: tab.dictValue === tabsCurrent ? '#0EB275' : '#333'}"
        @click="tabsClick(tab.dictValue)"
      >
        {{ tab.dictLabel }}
  
        <!-- 高亮条 -->
        <div
          v-if="tab.dictValue === tabsCurrent"
          :style="{
             position: 'absolute',
            bottom: '3px',
            left: '50%',
            transform: 'translateX(-50%)',
            width: '28px',
            height: '2px',
            background: '#0EB275',
            borderRadius: '1px'}"
        />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      tabsList: {
        type: Array,
        default: () => []
      },
      tabsCurrent: {
        type: String,
        default: 0
      }
    },
    methods: {
      tabsClick(idx) {
        this.$emit('tabsClick', idx );
      }
    },
    mounted() {
      console.log(this.tabsList,this.tabsCurrent);
    }
  };
  </script>
  
  <style scoped>
  /* 如需额外微调可写这里 */
  </style>